import React, { useState, useEffect } from 'react'
import { Layout, Menu, Popconfirm, message } from 'antd';
import { MailOutlined, AppstoreOutlined, SettingOutlined } from '@ant-design/icons';
import { Link } from 'umi'
import { menu } from "../../apis/login/index"
import { createFromIconfontCN } from '@ant-design/icons';
import style from '../../assets/css/home.less'
import logo from '../../assets/img/logo.png'
import tx from '../../assets/img/1633943932358.png'
import qs, { stringify } from 'querystring'
import '../../utlis/axiosUtils'
const { Header, Sider, Content } = Layout;
const { SubMenu } = Menu;
const IconFont = createFromIconfontCN({
    scriptUrl: "//at.alicdn.com/t/font_2928153_a8ynxy9hpn5.js",
});
export default function index(props) {
    const [current, setcurrent] = useState('1')
    const [list, setlist] = useState([])
    const userInfo = JSON.parse(localStorage.getItem('userInfo'))
    const handleClick = e => {
        console.log('click ', e);
        setcurrent(e.key)
    };
    const cancel = () => {
        message.warning("继续操作")
    }
    const confirm = () => {
        props.history.replace("/login")
    }
    const getmenu = async () => {
        const res = await menu(userInfo.username)
        setlist(res.data[0].children);
        console.log(res.data[0].children);
    }
    useEffect(() => {
        getmenu()
    }, [])
    const buttonWidth = 70;
    return (
        <>
            <Layout>
                <Sider>
                    <div className={style.logo}>
                        <div>
                            <img src={logo} alt="" />
                        </div>
                        <h2>赤兔养车</h2>
                    </div>
                    <Menu
                        theme='dark'
                        onClick={handleClick}
                        style={{ width: 200, height: "93.8vh" }}
                        defaultOpenKeys={['sub1']}
                        selectedKeys={[current]}
                        mode="inline"
                    >
                        {list.map(item => {
                            if (item.children) {
                                return (
                                    <SubMenu key={item.path} icon={<IconFont type={`icon-${item.icon}`}></IconFont>} title={item.name}>
                                        {item.children.map(value =>
                                            <Menu.Item key={value.path}>
                                                <Link to={"/home"+value.path}>{value.name}</Link>
                                            </Menu.Item>
                                        )}
                                    </SubMenu>
                                )
                            } else {
                                return (
                                    <Menu.Item key={item.path} icon={<IconFont type={`icon-${item.icon}`}></IconFont>}>
                                        <Link to={item.path}>{item.name}</Link>
                                    </Menu.Item>
                                )
                            }
                        }
                        )}
                    </Menu>
                </Sider>
                <Layout>
                    <Header>
                        <div className={style.title}>
                            <div className={style.personal}>
                                <img src={tx} alt="" />
                                <Popconfirm onConfirm={confirm} onCancel={cancel} title="确认退出登录？" okText="Yes" cancelText="No">
                                    <span style={{ color: 'white', marginLeft: '10px' }}>{userInfo.username}</span>
                                </Popconfirm>
                            </div>
                        </div>
                    </Header>
                    <Content>
                        <div className={style.main}>
                            {props.children}
                        </div>
                    </Content>
                </Layout>
            </Layout>
        </>
    )
}
